<template>
  <el-popover
    placement="top-start"
    :width="220"
    trigger="hover"
    @show="showPopover"
    @hide="hidePopover"
  >
    <div>
      <div class="pl-8 pt-8 pr-8">
        <!-- <div class="fs-16 c-26353f fw-600">{{ getTimeState() }}</div> -->
        <div class="h-8"></div>
        <div class="fs-16 c-26353f fw-600">{{ userinfo.nickname }}</div>
        <div class="h-8"></div>
        <template v-if="true">
          <div class="fs-16 c-26353f">{{ username }}</div>
          <div class="h-12"></div>
          <div class="fs-12 c-26353f">ID: {{ userinfo.id }}</div>
          <div class="h-12"></div>
          <div class="fs-12 c-868e94">
            上次登录：
            {{ lastLoginTime }}
          </div>
          <div class="h-16 bb-s-solid bb-w-1 c-e1e3e4"></div>
          <div class="h-10"></div>
        </template>
        <div class="topbar-menu-item" @click="toPage('/app/settings/log')">
          操作日志
        </div>
        <div class="h-10 bb-s-solid bb-w-1 c-e1e3e4"></div>
        <div class="h-10"></div>
        <div class="topbar-menu-item" @click="logout">切换账号</div>
        <div class="topbar-menu-item" @click="logout">
          <span class="c-danger">退出登录</span>
        </div>
      </div>
    </div>
    <template #reference>
      <div class="topbar-profile">
        <!-- <svg-icon iconName="icon-user" class="user-icon"></svg-icon> -->
        <img :src="avatar" class="user-icon" alt="" />
        <div class="ml-4 mr-4 c-26353f">{{ username }}</div>
        <div class="arrow-icon">
          <vab-icon
            class="vab-dropdown"
            icon="arrow-down-s-line"
            :class="{ 'vab-dropdown-active': isActvie }"
          />
          <!-- <svg-icon iconName="icon-arrowdown" ></svg-icon> -->
        </div>
      </div>
    </template>
  </el-popover>
</template>

<script>
  import { translateTitle } from '@/utils/i18n'
  import { mapActions, mapGetters } from 'vuex'
  import { toLoginRoute } from '@/utils/routes'
  import { fmtTime } from '@/utils'

  export default {
    name: 'VabAvatar',
    data() {
      return {
        active: false,
        isActvie: false,
        lastLoginTime: '',
      }
    },
    computed: {
      ...mapGetters({
        avatar: 'user/avatar',
        username: 'user/username',
        userinfo: 'user/userinfo',
      }),
    },
    created() {
      this.lastLoginTime = fmtTime(
        this.userinfo.createtime,
        'yyyy-MM-dd HH:mm:ss'
      )
    },
    methods: {
      translateTitle,
      ...mapActions({
        _logout: 'user/logout',
      }),
      handleCommand(command) {
        switch (command) {
          case 'logout':
            this.logout()
            break
          case 'personalCenter':
            this.personalCenter()
            break
        }
      },
      personalCenter() {
        this.$router.push('/setting/personalCenter')
      },
      async logout() {
        await this._logout()
        await this.$router.push(toLoginRoute(this.$route.fullPath))
      },
      showPopover(val) {
        this.isActvie = true
      },
      hidePopover(val) {
        this.isActvie = false
      },
    },
  }
</script>

<style lang="scss" scoped>
  .avatar-dropdown {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    justify-items: center;

    .user-avatar {
      width: 40px;
      height: 40px;
      margin-left: 15px;
      cursor: pointer;
      border-radius: 50%;
    }

    .user-name {
      position: relative;
      display: flex;
      align-content: center;
      align-items: center;
      height: 40px;
      margin-left: 6px;
      line-height: 40px;
      cursor: pointer;

      [class*='ri-'] {
        margin-left: 0 !important;
      }
    }
  }
  .topbar-profile {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    height: 54px;
    padding: 6px 14px;
    margin-left: 10px;
    cursor: pointer;
    background: #fff;
    border-radius: 14px;
    border-radius: 27px;
    transform: rotate(0deg);

    &.active {
      // background-color: #edf2f2;
      .arrow-icon {
        transform: rotateZ(180deg);
      }
    }

    .user-icon {
      width: 42px;
      height: 42px;
      border-radius: 50%;
    }

    .arrow-icon {
      display: flex;
      align-items: center;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      transition: all 0.3s ease 0s;
      svg {
        width: 12px;
        height: 12px;
      }
    }
  }
  .topbar-menu-item {
    padding: 0 8px;
    margin: 0 -8px;
    line-height: 32px;
    color: #7991bb;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s;

    &:hover {
      background-color: #f7fafa;
    }
  }
</style>
